<template>
    <div class="saleStoreDetail">
        <IHeader class="header" back="true" title="商品详情"  car="true"></IHeader>
        <scroller class="scrollCon" v-if="allData">
            <div class="Detail-header">
                <image :src="allData.topPicture ? allData.topPicture : imgPath('default_image.png')" class="headerImg"></image>
                <div class="datail-intro">
                    <div class="con1">
                        <div class="pri">
                            <text class="tit5">￥</text>
                            <text class="tit1">{{allData.discountPrice ? allData.discountPrice : allData.price}}{{'/' + allData.priceUnit}}</text>
                        </div>
                    </div>
                    <div class="con1 con3">
                        <div class="pri">
                            <text class="tit2">原价￥</text>
                            <text class="tit2 tit3">{{allData.price}}{{'/' + allData.priceUnit}}</text>
                        </div>
                    </div>
                    <text class="con2">{{allData.goodsName}}</text>
                    <div class="con1">
                        <div class="pri monthsale">
                            <text class="tit4">月销：</text>
                            <text class="tit4">{{allData.sales}}</text>
                            <text class="tit4">笔</text>
                        </div>
                        <text class="tit4">{{allData.address}}</text>
                    </div>
                </div>
            </div>
            <div class="xian"></div>
            <div class="choose" @click="shoppingShow">
                <div class="choosetext" >
                    <text class="choose1">选择</text>
                    <text class="choose2" v-if="guige">规格分类选择</text>
                    <text class="choose2" v-if="guigeChoose">{{dingzhiTypeText}}{{goodTypeText}}</text>
                </div>
                <image class="turnRight" :src="imgPath('arrow_right_small.png')"></image>
            </div>
            <div class="xian"></div>
            <div class="detail" v-if="allData.parameter">
                <text class="title">商品详情</text>
                <div class="tabledetail">
                    <div class="tableitem" v-if="allData.parameter.breadth">
                        <text class="tabletit1 itm">幅宽</text>
                        <text class="tabletit2 itm">{{allData.parameter.breadth}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.color">
                        <text class="tabletit1 itm">颜色</text>
                        <text class="tabletit2 itm">{{colorText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.componentProportion">
                        <text class="tabletit1 itm">成分比例</text>
                        <text class="tabletit2 itm">{{allData.parameter.componentProportion}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.cupThickness">
                        <text class="tabletit1 itm">杯型厚度</text>
                        <text class="tabletit2 itm">{{beiXingText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.elasticDegree">
                        <text class="tabletit1 itm">弹力程度</text>
                        <text class="tabletit2 itm" >{{tanXingText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.flowerHigh">
                        <text class="tabletit1 itm">花高</text>
                        <text class="tabletit2 itm ">{{allData.parameter.flowerHigh}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.flowerSize">
                        <text class="tabletit1 itm">花型尺寸</text>
                        <text class="tabletit2 itm ">{{allData.parameter.flowerSize}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.glossiness">
                        <text class="tabletit1 itm">光泽度</text>
                        <text class="tabletit2 itm " >{{glossinessText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.material">
                        <text class="tabletit1 itm">材质</text>
                        <text class="tabletit2 itm ">{{caiZhiText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.pantoneNum">
                        <text class="tabletit1 itm">潘通色号</text>
                        <text class="tabletit2 itm ">{{allData.parameter.pantoneNum}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.wrapperMaterial">
                        <text class="tabletit1 itm">包装材质</text>
                        <text class="tabletit2 itm ">{{wrapperText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.patchMaterial">
                        <text class="tabletit1 itm">贴边材质</text>
                        <text class="tabletit2 itm ">{{allData.parameter.patchMaterial}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.productionProcess">
                        <text class="tabletit1 itm">生产工艺</text>
                        <text class="tabletit2 itm ">{{allData.parameter.productionProcess}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.rawYarn">
                        <text class="tabletit1 itm">原料纱织</text>
                        <text class="tabletit2 itm ">{{rawYarnText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.patchMaterial">
                        <text class="tabletit1 itm">贴布材质</text>
                        <text class="tabletit2 itm ">{{allData.parameter.patchMaterial}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.rubberContent">
                        <text class="tabletit1 itm">含胶量</text>
                        <text class="tabletit2 itm "> {{allData.parameter.rubberContent}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.size">
                        <text class="tabletit1 itm">规格尺寸</text>
                        <text class="tabletit2 itm "> {{allData.parameter.size}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.sliderProcess">
                        <text class="tabletit1 itm">拉头工艺</text>
                        <text class="tabletit2 itm ">{{allData.parameter.sliderProcess}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.thickness">
                        <text class="tabletit1 itm">厚度</text>
                        <text class="tabletit2 itm ">{{allData.parameter.thickness}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.specificationModel">
                        <text class="tabletit1 itm">规格型号</text>
                        <text class="tabletit2 itm ">{{allData.parameter.specificationModel}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.otherRawYarn">
                        <text class="tabletit1 itm">其他原料纱支</text>
                        <text class="tabletit2 itm ">{{allData.parameter.otherRawYarn}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.weaveProcess">
                        <text class="tabletit1 itm">编织工艺</text>
                        <text class="tabletit2 itm " v-if="allData.parameter.weaveProcess ==='1'" >经编</text>
                        <text class="tabletit2 itm " v-if="allData.parameter.weaveProcess ==='2'" >纬编</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.weight">
                        <text class="tabletit1 itm">克重</text>
                        <text class="tabletit2 itm " >{{allData.parameter.weight}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.width">
                        <text class="tabletit1 itm">宽度</text>
                        <text class="tabletit2 itm ">{{allData.parameter.width}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.widthClass">
                        <text class="tabletit1 itm">宽度分类</text>
                        <text class="tabletit2 itm " >{{widthClassText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.otherParam">
                        <text class="tabletit1 itm">其他参数</text>
                        <text class="tabletit2 itm " >{{allData.parameter.otherParam}}</text>
                    </div>
                    <div class="shuoming" v-if="allData.describeInfo">
                        <text class="explain">描述信息</text>
                        <div class="smCon">
                            <text class="context">{{allData.describeInfo}}</text>
                        </div>
                    </div>
                    <div class="shuoming">
                        <text class="explain">特别说明</text>
                        <div class="smCon">
                            <text class="context">1、商品价格受原材料和市场趋势影响，最终成交价格以买卖双方确认后的价格为准；</text>
                            <text class="context">2、图片与实际颜色会有误差，以收到货物的实际颜色为准</text>
                            <text class="context">3、门幅和克重在指定范围内会有差异； </text>
                        </div>
                    </div>
                </div>
            </div>
            <div class="picIntro" v-if="allData.detailImgs">
                <div class="picheader">
                    <image :src="imgPath('default_image.png')" class="introImg"></image>
                    <text class="introtext">商品详情</text>
                </div>
                <image :src="item" class="imgWrapImg"  :key="index" v-for="(item, index) in imageObj"></image>
            </div>
        </scroller>
        <div class="footer">
            <div class="footer-right">
                <text class="add" @click="pushToPublishGood">修改信息</text>
                <text class="buy"  @click="underrage(allData.id)">下架商品</text>
            </div>
        </div>
        <div class="carModal" v-if="carShow" @touchend="stopEvent">
            <div class="carModalCon">
                <div class="topModal">
                    <div class="leftModal">
                        <div><image :src="allData.topPicture" class="modalImg"></image></div>
                        <div class="infomodal">
                            <div class="con">
                                <div class="con ">
                                    <text class="pri1 pri">￥</text>
                                    <text class="pri1">{{allData.price}}{{'/' + allData.priceUnit}}</text>
                                </div>
                                <div class="con">
                                    <text class="pri2">库存：</text>
                                    <text class="pri2" v-if="allData.inventory">{{allData.inventory}}</text>
                                    <text class="pri2" v-if="!allData.inventory">1</text>
                                </div>
                            </div>
                            <div class="con">
                                <text class="pri2">商品编号：</text>
                                <text class="pri2">{{allData.goodsNo}}</text>
                            </div>
                        </div>
                    </div>
                    <div class="close">
                        <image :src="imgPath('close.png')" class="closeImg" @click="closeModal"></image>
                    </div>
                </div>
                <div class="modalType">
                    <div class="type">
                        <text class="typename">订购类型</text>
                        <div class="choose-item">
                            <WxcGridSelect  class="dztext"  :list="data2" :cols="3"  :single="true" >
                            </WxcGridSelect>
                        </div>
                    </div>
                    <div class="type">
                        <text class="typename">商品类型</text>
                        <div class="choose-item">
                            <WxcGridSelect class="dztext" :list="data3" :cols="3"  :single="true" >
                            </WxcGridSelect>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import { storeDetail, groundGood, dinggouType, goodType } from '@/api/store'
import {getInfo} from '@/api/good'
import WxcGridSelect from '@/components/grid-select'
import { WxcLoading } from 'weex-ui'
const modal = weex.requireModule('modal')
export default {
  name: 'saleStoreDetail',
  data () {
    return {
      goodsId: '',
      allData: [],
      imageObj: [],
      dinggouList: [],
      number: 0,
      data2: [],
      data3: [],
      dingzhiTypeText: '',
      goodTypeText: '',
      display: true,
      shoucang: true,
      guige: true,
      carShow: false,
      colorText: '',
      beiXingText: '',
      tanXingText: '',
      widthClassText: '',
      glossinessText: '',
      caiZhiText: '',
      rawYarnText: '',
      wrapperText: '',
      needMask: true, // 显示蒙版
      loadingShow: true // loading
    }
  },
  methods: {
    // 商品发布
    pushToPublishGood () {
      const that = this
      that.$router.push({path: '/store/publishGood', query: {fabuData: that.allData}})
    },
    // 下架商品
    underrage (id) {
      const that = this
      that.loadingShow = true
      that.$api.post(groundGood + '/' + id, {}, function (res) {
        that.loadingShow = false
        modal.toast({
          message: '商品下架成功'
        })
      })
    },
    // 关闭弹窗
    closeModal () {
      this.carShow = false
    },
    shoppingShow () {
      const that = this
      that.carShow = true
      that.guige = false
      that.guigeChoose = true
    }
  },
  mounted: function () {
    const that = this
    that.loadingShow = true
    that.$api.get(storeDetail + '/' + this.$route.query.goodsId, {}, function (res) {
      that.loadingShow = false
      that.allData = res.data
      if (that.allData.detailImgs && that.allData.detailImgs.length > 0) {
        that.imageObj = that.imageObj.concat(that.allData.detailImgs.split(','))
      }
      // 获取颜色
      if (that.allData.color && that.allData.color.length > 0) {
        let colorparams = {
          value: that.allData.color,
          type: 'color'
        }
        that.$api.get(getInfo, colorparams, function (res) {
          that.colorText = res.data.description
        })
      }
      if (that.allData.parameter.cupThickness && that.allData.parameter.cupThickness.length > 0) {
        let beiXing = {
          value: that.allData.parameter.cupThickness,
          type: 'cup_thickness'
        }
        that.$api.get(getInfo, beiXing, function (res) {
          that.beiXingText = res.data.description
        })
      }
      if (that.allData.parameter.elasticDegree && that.allData.parameter.elasticDegree.length > 0) {
        // 弹性
        let tanxing = {
          type: 'elastic_degree',
          value: that.allData.parameter.elasticDegree
        }
        that.$api.get(getInfo, tanxing, function (res) {
          that.tanXingText = res.data.description
        })
      }
      if (that.allData.parameter.glossiness && that.allData.parameter.glossiness.length > 0) {
        let glossiness = {
          type: 'glossiness',
          value: that.allData.parameter.glossiness
        }
        that.$api.get(getInfo, glossiness, function (res) {
          that.glossinessText = res.data.description
        })
      }
      if (that.allData.parameter.material && that.allData.parameter.material.length > 0) {
        // 材质
        let caizhi = {
          type: 'fabric_material',
          value: that.allData.parameter.material
        }
        that.$api.get(getInfo, caizhi, function (res) {
          that.caiZhiText = res.data.description
        })
      }
      if (that.allData.parameter.rawYarn && that.allData.parameter.rawYarn.length > 0) {
        let rawYarn = {
          type: 'fabric_raw_yarn',
          value: that.allData.parameter.rawYarn
        }
        that.$api.get(getInfo, rawYarn, function (res) {
          that.rawYarnText = res.data.description
        })
      }
      if (that.allData.parameter.widthClass && that.allData.parameter.widthClass.length > 0) {
        let widthClass = {
          type: 'width_class',
          value: that.allData.parameter.widthClass
        }
        that.$api.get(getInfo, widthClass, function (res) {
          that.widthClassText = res.data.description
        })
      }
      if (that.allData.parameter.wrapperMaterial && that.allData.parameter.wrapperMaterial.length > 0) {
        let wrap = {
          type: 'wrapper_material',
          value: that.allData.parameter.wrapperMaterial
        }
        that.$api.get(getInfo, wrap, function (res) {
          that.wrapperText = res.data.description
        })
      }
    }, function () {
      that.loadingShow = false
    }, true)
    that.$api.get(dinggouType, {}, function (res) {
      that.data2 = res.data
    })
    that.$api.get(goodType, {}, function (res) {
      that.data3 = res.data
    })
  },
  components: {
    IHeader,
    WxcGridSelect,
    WxcLoading
  }
}
</script>

<style scoped>
    .pri{
        font-size:28px;
    }
    .pri2{
        color:rgb(134,134,134);
        font-size:24px;
    }
    .xian{
        width:750px;
        height:16px;
        background-color: rgb(245,245,245);
    }
    .headerImg{
        width: 750px;
        height:750px;
    }
    .datail-intro{
        padding-top:23px;
        padding-bottom:40px;
        padding-left:23px;
        padding-right:23px;
    }
    .datail-intro{
        flex-direction: column;
    }
    .con1{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .pri{
        flex-direction: row;
        align-items: baseline;

    }
    .tit5{
        font-size: 36px;
        color: rgb(254,203,1);
        font-weight:bold;
    }
    .tit1{
        font-size: 46px;
        color: rgb(254,203,1);
        font-weight: bold;
    }
    .tit2{
        font-size:24px;
        color:rgb(134,134,134);
    }
    .tit3{
        text-decoration: line-through;
        /*font-size:24px;*/
        /*color:rgb(70,70,70);*/
    }
    .con2{
        font-size:32px;
        color:rgb(70,70,70);
        font-weight:bold;
    }
    .tit4{
        font-size:24px;
        color:rgb(134,134,134)
    }
    .shoucang{
        font-size:24px;
        color:rgb(254,203,1);
    }
    .xingxing{
        width:40px;
        height:40px;
    }
    .con3{
        margin-top: 10px;
        margin-bottom: 34px;
    }
    .con2{
        margin-bottom:32px;
    }
    .choose{
        width: 750px;
        height: 88px;
        padding-left: 24px;
        padding-right:24px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .choosetext{
        flex-direction: row;
    }
    .choose1{
        color:rgb(134,134,134);
        font-size:28px;
    }
    .choose2{
        font-size:28px;
        color:rgb(70,70,70);
        margin-left: 38px;
    }
    .tabledetail{
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color:  rgb(235,235,235);
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(235,235,235);
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color:  rgb(235,235,235);
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color:  rgb(235,235,235);
        width: 702px;
    }
    .title{
        font-size:32px;
        color:rgb(70,70,70);
        font-weight: bold;
        padding-top:28px;
        padding-bottom:28px;
    }
    .detail{
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
    }
    .tableitem{
        height: 70px;
        flex-direction: row;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(235,235,235);
    }
    .itm{
        width: 350px;
        height: 70px;
        text-align: center;
        line-height: 70px;
    }
    .tabletit1{
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color:  rgb(235,235,235);
        font-size: 28px;
        color: rgb(134,134,134);
    }
    .tabletit2{
        font-size: 28px;
        color:rgb(70,70,70);
        font-weight:bold;
    }
    .shuoming{
        padding-left: 38px;
        padding-top: 23px;
        padding-right: 38px;
        padding-bottom: 23px;
        flex-direction: column;
    }
    .smCon{
        flex-direction: row;
        flex-wrap: wrap;
    }
    .context{
        font-size:24px;
        width: 635px;
        color:rgb(134,134,134);
        line-height: 36px;
        flex-wrap: wrap;
    }
    .explain{
        font-size: 24px;
        color:rgb(70,70,70)
    }
    .footer{
        width: 750px;
        position:fixed;
        bottom:0;
        height: 98px;
        flex-direction: row;
        background-color: #Fff;
        border-top-color: rgb(235,235,235);
        border-top-style: solid;
        border-top-width: 1px;
        justify-content: flex-end;
        padding-right:25px;
    }
    .footer-right{
        width: 460px;
        height: 98px;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center
    }
    .add{
        /*width:230px;*/
        height:60px;
        background-color: #fff;
        border-width:1px;
        border-style:solid;
        border-color:rgb(70,70,70);
        line-height:60px;
        font-size:26px;
        color:rgb(70,70,70);
        text-align:center;
        padding-left:24px;
        padding-right:24px;
        font-family: medium;
        border-radius: 10px;
    }
    .buy{
        padding-left:24px;
        padding-right:24px;
        height:60px;
        background-color: rgb(84,92,114);
        line-height:60px;
        font-size:26px;
        text-align:center;
        color:rgb(255,255,255);
        font-family: medium;
        margin-left: 30px;
        border-radius: 10px;
    }
    .monthsale{
        flex-direction: row;
        align-items: center;
    }
    .scrollCon{
        margin-bottom: 80px;
    }
    .carModal{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,0.66);
    }
    .carModalCon{
        padding-right: 25px;
        padding-left: 25px;
        padding-top: 25px;
        background-color: #fff;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        position: absolute;
        bottom: 0;
        width: 750px;
        border-bottom-color: rgb(245,245,245);
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
    .topModal{
        padding-bottom: 20px;
        flex-direction: row;
        justify-content: space-between;
        border-bottom-color: rgb(245,245,245);
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
    .modalType{
        padding-top: 8px;
        padding-bottom: 30px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color:rgb(235,235,235);
    }
    .type{
        flex-direction: column;
        background-color: #fff;
        margin-top: 30px;
    }
    .typename{
        font-size:24px;
        color:rgb(206,206,206);
        padding-left: 24px;
        padding-right: 24px;
    }
    .choose-item{
        flex-direction: row;
        margin-top:20px;
        width:700px;
        flex-wrap: wrap;
    }
    .dztext{
        padding-top:18px;
        font-size:24px;
        padding-bottom:18px;
        color:rgb(70,70,70);
        margin-right: 20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-bottom: 15px;
    }
    .modalInput{
        flex-direction: row;
        justify-content: space-between;
        height: 88px;
    }
    .shuliang{
        font-size:24px;
        line-height:88px;
        color:rgb(134,134,134);
    }
    .monthsale{
        flex-direction: row;
        align-items: center;
    }
    .turnRight{
        width: 15px;
        height: 20px;
    }
    .closeImg{
        width: 31px;
        height: 31px;
    }
    .modalImg{
        width:200px;
        height:200px;
    }
    .infomodal{
        flex-direction: column;
        margin-left: 25px;
    }
    .con{
        flex-direction: row;
        margin-right: 15px;
        align-items: flex-end;
        margin-top: 15px;
    }
    .pri1{
        color:rgb(254,203,1);
        font-size:36px;
        font-weight:bold;
    }
    .pri{
        font-size:28px;
    }
    .pri2{
        color:rgb(134,134,134);
        font-size:24px;
    }
    .xian{
        width:750px;
        height:16px;
        background-color: rgb(245,245,245);
    }

    .datail-intro{
        padding-top:23px;
        padding-bottom:40px;
        padding-left:23px;
        padding-right:23px;
    }
    .datail-intro{
        flex-direction: column;
    }
    .con1{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .leftModal{
        flex-direction: row;
        align-items: flex-end;
    }
    .choose-item{
        flex-direction: row;
        margin-top:20px;
        width:700px;
        flex-wrap: wrap;
    }
    .dztext{
        padding-top:18px;
        font-size:24px;
        padding-bottom:18px;
        color:rgb(70,70,70);
        margin-right: 20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-bottom: 15px;
    }
    .close{
        width: 31px;
        height: 31px;
        background-color: rgba(43,48,64,0.3);
        border-radius: 50%;
    }
    .picIntro{
        margin-bottom: 130px;
    }
    .picheader{
        width: 750px;
        height:72px;
        background-color: rgb(235,235,235);
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .introImg{
        width:34px;
        height:24px;
        margin-right:16px;
    }
    .introtext{
        font-size:26px;
        color:rgb(206,206,206);
    }
    .imgWrapImg{
        width: 700px;
        margin-left: 25px;
        min-height: 750px;
    }
</style>
